<template>
    <view class="content">
        <!-- <image src="/static/start4.9.png" class="image"></image> -->
        <view class="avatorWrapper">
            
            <view class="avator">
                <image class="img" src="/static/logo5.png" mode="widthFix"></image>
            </view>
        </view>
        <view class="form">
            <u-form :model="form" ref="uForm">
                <u-form-item label="用户名" prop="userName" label-position="top">
                    <u-input v-model="form.userName" />
                </u-form-item>
                <u-form-item label="密码" prop="password" label-position="top">
                    <u-input type="password" v-model="form.password" />
                </u-form-item>
            </u-form>
            <view class="button">
                <sliderzz @change="change"></sliderzz>
            </view>
            
            <view class="button">
                <u-button @click="submit">登录</u-button>
            </view>
            <view class="button">
                <u-button @click="register()">注册</u-button>
            </view>
            <view class="return">
                <view @click="test">返回</view>
            </view>
            
            <!-- <view class="inputWrapper">
				<input class="input" type="text" value="" placeholder="请输入用户名"/>
			</view>
			<view class="inputWrapper">
				<input class="input" type="password" value="" placeholder="请输入密码"/>
			</view>
			<view class="loginBtn" @click="login()">
				<text class="btnValue">登录</text>
			</view>
			<view class="forgotBtn">
				<text>找回密码</text>
			</view> -->
        </view>
        <u-toast ref="uToast" />
    </view>
</template>

<script>
    import {
        test,
        login
    } from "../../api/login.js"
    import sliderzz from '@/components/sliderzz/index.vue'
    export default {
        components:{
            sliderzz
        },
        data() {
            return {
                title: 'hello',
                form: {
                    userName: '',
                    password: '',
                },
                rules: {
                    userName: [{
                        required: true,
                        message: '请输入用户名',
                        // 可以单个或者同时写两个触发验证方式 
                        trigger: ['change', 'blur'],
                    }],
                    password: [{
                        min: 2,
                        message: '请输入正确的密码',
                        trigger: 'change',
                    }]
                },
                yanzheng: false,
            };
        },
        methods: {
            submit() {
                const pages = getCurrentPages()
                const _this = this;
                if(this.yanzheng == false){
                    this.$refs.uToast.show({
                    					title: '请验证后再登录',
                    					type: 'error',
                    					// url: '/pages/user/index'
                    })
                }
                else{
                this.$refs.uForm.validate(valid => {
                    if (valid) {
                        console.log('验证通过');
                        console.log(_this.form)
                        login(_this.form).then(function(res) {
                            if(res.data.code==200){
                        uni.setStorageSync("token", res.data.data.token)
                        uni.setStorageSync("userInfo", res.data.data)
                        _this.$store.commit("setUserInfo",res.data.data)
                        // console.log('asa',res.data.data.token)
                        if(pages.length>1){
                        uni.navigateBack({
                            delta: 1
                        });
                            
                        }
                        else{
                            uni.switchTab({
                                url: '/pages/index/index'
                            });
                        }
                        }else{
                            _this.$refs.uToast.show({
                            					title: res.data.msg,
                            					type: 'error',
                            					// url: '/pages/user/index'
                            })
                        }
                        })
                    } else {
                        // _this.yanzheng=false
                        // _this.change()
                        console.log('验证失败');
                    }
                })
                }
                // console.log(uni.getStorageSync("token"))
            },
            test(){
                // test().then(function(res) {
                //     console.log(res)
                // })
                const pages = getCurrentPages()
                
                if(pages.length>1){
                uni.navigateBack({
                    delta: 1
                });
                    
                }
                else{
                    uni.switchTab({
                        url: '/pages/index/index'
                    });
                }
            },
            register(){
                uni.navigateTo({
                    url: '/pages/login/register/index'
                });
            },
            change({finish,reset}) { //这里有两个函数一般滑动都是要校验之后才能提交的，所以第一个finish知行之后他会提交
            				this.yanzheng=true
                            finish();//保存提交状态
            				setTimeout(() => {
                                this.yanzheng=false
            					reset();//这个是提交之后过一会可能会重新提交进入重置状态
            				},60000)
            },
        },
        // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
        onReady() {
            this.$refs.uForm.setRules(this.rules);
        }
    }
</script>

<style>
    .content {
        background: #ffffff;
        /* background: url(/static/start4.9.png); */
        width: 100vw;
        height: 100vh;
    }
    .image{
        /* width: 750rpx; */
    }
    .avatorWrapper {
        height: 30vh;
        width: 100vw;
        display: flex;
        justify-content: center;
        align-items: flex-end;
    }

    .avator {
        width: 223rpx;
        height: 360rpx;
        overflow: hidden;
    }

    .avator .img {
        width: 100%
    }

    .form {
        padding: 0 100rpx;
        margin-top: 20rpx;
    }

    .inputWrapper {
        width: 100%;
        height: 80rpx;
        background: #f1f1f1;
        border-radius: 20px;
        box-sizing: border-box;
        padding: 0 20px;
        margin-top: 25px;
    }

    .inputWrapper .input {
        width: 100%;
        height: 100%;
        text-align: center;
        font-size: 15px;
    }

    .loginBtn {
        width: 100%;
        height: 80rpx;
        background: #77B307;
        border-radius: 50rpx;
        margin-top: 50px;
        display: flex;
        justify-content: center;
        align-items: center;

    }

    .loginBtn .btnValue {
        color: white;
    }

    .forgotBtn {
        text-align: center;
        color: #626768;
        font-size: 15px;
        margin-top: 20px;
    }
    .button {
        padding: 15rpx 0;
    }
    .return {
        padding: 15rpx 0;
        text-align: center;
        color: #3F536E;
        font-size: 30rpx;
    }
</style>
